import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_todolist/pages/home/task_overview.dart';
import 'package:flutter_todolist/pages/home/task_type_controller.dart';
import 'package:flutter_todolist/utils/common.dart';
import 'package:flutter_todolist/utils/extention.dart';
import 'package:flutter_todolist/widgets/app_button.dart';
import 'package:flutter_todolist/widgets/text_input.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get.dart';

class AddTaskType extends StatefulWidget {
  const AddTaskType({Key? key}) : super(key: key);

  @override
  State<AddTaskType> createState() => _AddTaskTypeState();
}

class _AddTaskTypeState extends State<AddTaskType> {
  // String icon = "custom_task/type_1";
  int currentIconIndex = 0;
  String taskTitle = "";
  int currentColorIndex = 0;
  final taskOverViewController = Get.find<TaskOverViewController>();

  List<Color> colorList = [
    Color(0xFFF44336),
    Color(0xFFFF5252),
    Color(0xFFE91E63),
    Color(0xFFFF4081),
    Color(0xFF9C27B0),
    Color(0xFFE040FB),
    Color(0xFF673AB7),
    Color(0xFF7C4DFF),
    Color(0xFF3F51B5),
    Color(0xFF536DFE),
    Color(0xFF2196F3),
    Color(0xFF448AFF),
    Color(0xFF03A9F4),
    Color(0xFF40C4FF),
    Color(0xFF00BCD4),
    Color(0xFF18FFFF),
    Color(0xFF009688),
    Color(0xFF64FFDA),
    Color(0xFF4CAF50),
    Color(0xFF69F0AE),
    Color(0xFF8BC34A),
    Color(0xFFB2FF59),
    Color(0xFFCDDC39),
    Color(0xFFEEFF41),
    Color(0xFFFFEB3B),
    Color(0xFFFFFF00),
    Color(0xFFFFC107),
    Color(0xFFFFD740),
    Color(0xFFFF9800),
    Color(0xFFFFAB40),
    Color(0xFFFF5722),
    Color(0xFFFF6E40),
  ];

  TextEditingController taskTypeEditCtrl = TextEditingController();
  TaskTypeController taskTypeCtrl = Get.put(TaskTypeController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: '添加任务类型'.text(fontSize: 20.sp),
      ),
      body: Stack(
        children: [
          SingleChildScrollView(
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 20.w),
              child: Column(
                // crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  resultShow(),
                  SizedBox(height: 20.h),

                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      "任务类型名称".text(),
                      Row(
                        children: [
                          Expanded(
                              child: AppTextInput(
                            hintText: "taskType title",
                            hintStyle: TextStyle(fontSize: 20.sp, color: Color(0xFFBCBCBC)),
                            style: TextStyle(fontSize: 20.sp, fontStyle: FontStyle.normal),
                            controller: taskTypeEditCtrl,
                            maxLines: 1,
                            onChange: (value) {
                              setState(() {
                                taskTitle = value;
                              });
                            },
                          ))
                        ],
                      ),
                    ],
                  ),

                  SizedBox(height: 20.h),

                  // 自定title
                  // 自定icon
                  GridView.builder(
                      itemCount: 27,
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 5, crossAxisSpacing: 10.w, mainAxisSpacing: 10.h),
                      itemBuilder: (context, index) {
                        return GestureDetector(
                          onTap: () {
                            setState(() {
                              // icon = "custom_task/type_${index+1}";
                              currentIconIndex = index;
                            });
                          },
                          child: Container(
                            decoration: BoxDecoration(
                              border: currentIconIndex == index ? Border.all(color: Colors.grey) : null,
                              borderRadius: BorderRadius.circular(12),
                              color: Colors.grey.withOpacity(0.2),
                            ),
                            child: Align(
                              child: "custom_task/type_${index + 1}"
                                  .assetsImg(width: 28.r, height: 28.r, fit: BoxFit.cover),
                            ),
                          ),
                        );
                      }),

                  SizedBox(height: 20.h),

                  // 自定颜色
                  GridView.builder(
                      itemCount: colorList.length,
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 5, crossAxisSpacing: 10.w, mainAxisSpacing: 10.h),
                      itemBuilder: (context, index) {
                        return GestureDetector(
                          onTap: () {
                            setState(() {
                              currentColorIndex = index;
                            });
                          },
                          child: Container(
                              decoration:
                                  BoxDecoration(color: colorList[index], borderRadius: BorderRadius.circular(90)),
                              child: Center(
                                child: currentColorIndex == index
                                    ? FaIcon(FontAwesomeIcons.check, size: 30.r, color: Colors.white)
                                    : const SizedBox(),
                              )),
                        );
                      }),

                  SizedBox(height: 60.h),

                  // confirm()
                ],
              ),
            ),
          ),
          Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: Container(
                height: 60.h,
                color: Colors.white,
                child: Align(
                  child: confirm(),
                ),
              ))
        ],
      ),
    );
  }

  Widget resultShow() {
    return Column(
      children: [
        Container(
          padding: EdgeInsets.all(15.r),
          decoration: BoxDecoration(
              color: colorList[currentColorIndex].withOpacity(0.2),
              borderRadius: BorderRadius.circular(90),
              border: Border.all(color: colorList[currentColorIndex])),
          child: Column(
            children: [
              "custom_task/type_${currentIconIndex + 1}"
                  .assetsImg(width: 25.r, height: 25.r, fit: BoxFit.cover, color: colorList[currentColorIndex]),
            ],
          ),
        ),
        Text(taskTitle)
      ],
    );
  }

  Widget confirm() {
    return SizedBox(
      // margin: EdgeInsets.symmetric(vertical: 20.h),
      width: Get.width - 40.w,
      height: 40.h,
      child: AppButton(
        content: 'add task type',
        onTap: () {
          if (taskTitle.isNotEmpty) {
            taskTypeCtrl.addTaskType(
              taskTitle,
              colorList[currentColorIndex].value,
              "custom_task/type_${currentIconIndex + 1}",
            );
            taskOverViewController.getTaskStat();
            Get.back();
          } else {
            showToast('Please enter title');
          }
        },
      ),
    );
  }
}
